<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6基础语法</title>
</head>
<body>
   <div id="abc"></div>
</body>
</html>
<script>
    //1. var与let： 前者代表全局变量，后者代表局部变量
    // const： 常量，不可修改
    function fun1() {
        {
            var a = 10
            let b = 5
        }
        const c = 123
        console.log("a = ",a)
        // console.log("b = ",b)
        console.log("c = ",c)
        c = 456
    }
    // fun1()
    //2. 解构表达式(场景一：数组解构)
    function fun2(){
        let arr = [1,2,3]
        const [a,b,c] = arr
        console.log("a = ",a)
        console.log("b = ",b)
        console.log("c = ",c)
    }
    // fun2()
    //3. 解构表达式（场景二：对象解构） 【***** 非常重要  *****】
    function fun3(){
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //用法一：当对象中的属性名与变量名不一致时
        // const {name:a,age:b,language:c} = person
        // console.log("a = ",a)
        // console.log("b = ",b)
        // console.log("c = ",c)
        //用法二：当对象中的属性名与变量名一致时 (:前后的key与value的名字一样时，可以省略只写key)
        const {name,age,language} = person
        console.log("name:",name)
        console.log("age:",age)
        console.log("language:",language)
    }
    // fun3()
    //4. 字符串增强
    function fun4(){
        //4.1 增加一些函数
        let str = "hello,world"
        let startsWith = str.startsWith("hello");           // 是否以指定字符串开头
        let endsWith = str.endsWith("lda")                  // 是否以指定字符串结束
        console.log("startsWith:",startsWith)
        console.log("endsWith:",endsWith)
        const includes = str.includes("wor")                // 是否包含有指定的字符串
        console.log("includes:",includes)

        //4.2 模板字符串     【***** 非常重要  *****】
        let h = 'hello，大家好！'
        let info = `
            <div>
                <span>${h}<span>
            </div>
        `
        console.log("info:",info)
    }
    // fun4()
    //5. 函数优化
    //函数的默认值问题：方法一：原来的老式处理方法
    function add(a,b){
        b = b || 0
        return a + b
    }
    // let s = add(10)
    // console.log("s = ", s,',type:',typeof s)
    //函数的默认值问题：方法二：增加了默认值
    function add1(a,b=0) {
        return a + b
    }
    // let s = add1(10,5)
    // console.log("s = " ,s)
    //6. 不定参数的函数
    function sum(...args){
        let s = 0
        for (let i = 0; i < args.length; i++) {
            s += args[i]
        }
        return s
    }
    // let s = sum(1,2,3,4,5)
    // console.log("s = ",s)
    //7. 箭头函数
    //7.1 只带有一个参数 (此时可以省略参数外的括号)
    let test = a =>{
        console.log(a)
    }
    // test(100)
    //7.2 带有多个参数的箭头函数
    let test2 = (a,b=0) =>{
        return a + b
    }
    // let t2 = test2(100,10)
    // console.log("t2 = ",t2)
    //7.3 实战：箭头函数结合解构表达式 【***** 非常重要  *****】
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    let fun6 = ({name,age,language})=>{
        console.log("name:",name,",age:",age,",language:",language)
    }
    // fun6(person)
    //8. 对象优化
    function fun7(){
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //8.1 得到对象的所有的keys集合
        let keys = Object.keys(person)
        console.log("keys:",keys)
        //8.2 得到对象的所有的values集合
        let values = Object.values(person)
        console.log("values:",values)
        //8.3 得到对象的所有的entry集合
        let entries = Object.entries(person)
        console.log("entries:",entries)
    }
    // fun7()
    //9. 函数的简化方法
    //箭头函数的this的作用域：是当前定义变量所在的作用域范围
    var name = '李四'
    let student = {
        name: "张三",
        // 以前：
        // eat: function (food) {
        //     console.log(this.name + "在吃" + food);
        // },
        //可以简化为：
        eat1: food => console.log("使用箭头函数简化,",student.name,'正在吃',food),
        eat2(food){       // 【***** 非常重要  *****】
            console.log("最终的简化版本,同学",this.name,'正在吃',food)
        }
    }
    student.eat1('饭')
    student.eat2('肉')
    console.log("window:",window)  // BOM / DOM
</script>